<template>
  <div class="co_with">
    <div class="co_with_box">
      <div v-show="tabstatus == 0">
        <div
          class="co_box_item"
          v-for="(item,index) in weilingqu"
          :key='index'
        >
          <div class="with_img">
            <img
              :src="item.cover"
              alt=""
            >
          </div>
          <div class="with_text">
            <div>{{item.class_name}}</div>
            <div>{{item.title}}元</div>
            <div>{{item.create_time}}</div>
          </div>
          <div class="with_btn">
            <div
              @click="with_money(item.distribution_id,item.money,item)"
            >领取收益</div>
          </div>
        </div>
        <div
          style="height:70px"
          v-show="!wei_kong"
        ></div>
        <div
          class="co_with_onkey"
          v-show="!wei_kong"
        >
          <div @click="onekey_with">一键领取</div>
        </div>
        <div
          class="marsk"
          v-if="houjiamarsk"
          @click="closeMarsk"
        >
          <div class="houjia">
            <section class="houjia-title">收费提示</section>
            <section class="seti">
              <div>提现金额</div>
              <div>{{tixiData.cash_money}}元</div>
            </section>
            <section class="seti">
              <div>本次服务费</div>
              <div>{{tixiData.service_money}}元</div>
            </section>
            <!-- <section class="seti-line"></section> -->
            <!-- <section class="seti">
              <div>姓名：{{form.name}}</div>
            </section>
            <section class="seti">
              <div>提现银行：{{form.bank_card}}</div>
            </section>
            <section class="seti">
              <div>开户地址：{{form.address}}</div>
            </section>
            <section class="seti">
              <div>银行卡号：{{form.bank_card_code}}</div>
            </section> -->
            <section class="contents">每笔提现金额至少1元，每日提现上限5000。每笔交易微信会收取0.6%的手续费。提现申请后，1个工作日内自动转自你的微信钱包！</section>
            <section
              class="houjia-btn"
              @click.stop="goon"
            >继续提现</section>
          </div>
        </div>
        <kong
          :type='co_kong'
          img='https://o6wndwjxn.qnssl.com/WechatIMG3.png'
          v-show="wei_kong"
        ></kong>
      </div>
    </div>
    <div
      class="co_with_tips"
      v-show="co_with_tips"
      @click="co_with_tips_click"
    >
      <div
        class="zhezhao"
        v-if="code"
      >
        <img :src="code === 200 ? 'https://o6wndwjxn.qnssl.com/toast_custom_correct.png' : 'https://o6wndwjxn.qnssl.com/toast_custom_error.png'">
        <p>提示{{code === 200 ? '成功' : '失败'}}</p>
        <p>{{tipstext}}</p>
      </div>
      <div
        v-else
        class="zhezhao"
      >
        <img src="https://o6wndwjxn.qnssl.com/%E6%9C%AA%E7%BB%91%E5%AE%9A%E9%93%B6%E8%A1%8C%E5%8D%A1%E6%8F%90%E7%A4%BA@2x.png">
        <section class="heheda">禀告主人！您的银行卡信息未完善</section>
        <aside class="aside" @click="goyinhangka">
          去完善
        </aside>
      </div>
      <!-- <Tips :type='tipstext'></Tips> -->
    </div>
  </div>
</template>

<script>
import Tips from '@/components/public/Tips.vue'
import kong from '@/components/public/kong.vue'
import { getReady } from '@/api/center'
import {
  mapState
} from 'vuex'
import {
  Tab,
  TabItem,
  Sticky,
  Divider,
  XButton,
  Swiper,
  SwiperItem
} from 'vux'
import { nocash, forward, examineIng, isbankcard } from '@/api/center'
import axios from 'axios'
export default {
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  data () {
    return {
      form: {
        name: '',
        phone: '',
        bank_card: '',
        address: '',
        bank_card_code: ''
      },
      co_kong: '任何数据',
      code: '',
      tixiData: '',
      houjiamarsk: false,
      quetype: '',
      co_with_tips: false,
      tabstatus: 0,
      tipstext: '提示信息',
      // 未领取
      pagewei: 1,
      wei_type: '未领取',
      wei_kong: true,
      weilingqu: [],
      tabstatus_wei: false,
      // 已领取
      pageyi: 1,
      yi_type: '已领取',
      yi_kong: true,
      yilingqu: [],
      tabstatus_yi: false,

      // 审核
      pageshen: 1,
      shen_type: '审核中',
      shen_kong: true,
      shenhe: [],
      tabstatus_shen: false
    }
  },
  components: {
    Tab,
    TabItem,
    Sticky,
    Divider,
    XButton,
    Swiper,
    SwiperItem,
    Tips,
    kong
  },
  created () {
    this.quetype = this.$route.query.state
    this.isbankcard()
    if (this.quetype) {
      this.getWeilingqu()
    } else {
      this.getWeilingqu()
      this.getYilingqu()
    }
  },
  mounted () {
    this.$nextTick(() => {
      // window.addEventListener('scroll', this.yh_scroll)
    })
  },
  beforeDestroyed () {
    // window.removeEventListener('scroll', this.yh_scroll)
  },
  methods: {
    goyinhangka () {
      this.$router.push({
        path: '/bankcard'
      })
    },
    isbankcard () {
      let obj = {
        member_id: this.user_id
      }
      isbankcard(obj).then(res => {
        if (res.data.code == 200) {
          this.form = res.data.data
        } else {
          this.co_with_tips = false
          this.tipstext = '禀告主人！您的银行卡信息未完善'
        }
      })
    },
    goon () {
      let apiurl
      if (this.requery.type) {
        apiurl = 'api/chat/cash/receive_money'
      } else {
        apiurl = 'api/chat/cash/onekey_money'
      }
      axios.post(apiurl, this.requery).then(res => {
        this.houjiamarsk = false
        let {
          code,
          data,
          msg
        } = res.data
        // console.log('领取结果', res)
        this.code = code
        if (code == 200) {
          this.co_with_tips = true
          this.tipstext = '成功提取到零钱'
          this.getWeilingqu()
        } else {
          this.co_with_tips = true
          this.tipstext = msg
        }
        setTimeout(() => {
          this.co_with_tips = false
        }, 1000)
      })
    },
    closeMarsk () {
      this.houjiamarsk = false
    },
    co_with_tips_click () {
      this.co_with_tips = false
    },
    yh_scroll () {
      var scroll = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || 0
      var height = document.body.clientHeight
      var windo = window.innerHeight
      if (this.tabstatus == 0 && !this.tabstatus_wei) {
        if (scroll == height - windo) {
          // console.log('未领取触底')
          this.pagewei++
          this.getWeilingqu(1)
        }
      }
      if (this.tabstatus == 1 && !this.tabstatus_yi) {
        // console.log(scroll,height,windo)
        if (scroll == height - windo + 5) {
          // console.log('已领取触底')
          this.pageyi++
          this.getYilingqu(1)
        }
      }
      if (this.tabstatus == 2 && !this.tabstatus_shen) {
        // console.log(scroll,height,windo)
        if (scroll == height - windo + 5) {
          // console.log('审核触底')
          this.pageshen++
          this.getShenhe(1)
        }
      }
    },
    getWeilingqu (e) {
      let requery = {
        app_id: this.app_id,
        member_id: this.user_id,
        page: this.pagewei,
        pageshow: 10
      }
      nocash(requery).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        let { code, data, msg } = res.data
        // console.log('未领取',data)
        if (code == 200) {
          this.wei_kong = false
          for (var i = 0; i < data.length; i++) {
            if (data[i].up_money) {
              data[i].money = data[i].up_money
            }
            if (data[i].recommender_money) {
              data[i].money = data[i].recommender_money
            }
            if (data[i].commission_money) {
              data[i].money = data[i].commission_money
            }
          }
          if (this.pageyi === 1) {
            this.weilingqu = data
          } else {
            this.weilingqu = this.weilingqu.concat(data)
          }
        } else {
          if (!this.tabstatus_wei) {
            if (e == 1) {
              this.tabstatus_wei = true
              this.co_with_tips = true
              this.tipstext = '没有更多了...'
              return
            }
          }
          this.wei_kong = true
          // console.log('就是没有')
        }
      })
    },
    getYilingqu (e) {
      let requery = {
        app_id: this.app_id,
        member_id: this.user_id,
        page: this.pageyi,
        pageshow: 10
      }
      forward(requery).then(res => {
        // console.log('已领取',res)
        let { code, data, msg } = res.data
        if (code == 200) {
          this.yi_kong = false
          console.log(this.pageyi)
          if (this.pageyi === 1) {
            console.log(this.yilingqu)
            // this.yilingqu = data
          } else {
            this.yilingqu = this.yilingqu.concat(data)
          }
        } else {
          if (!this.tabstatus_yi) {
            if (e == 1) {
              this.tabstatus_yi = true
              this.co_with_tips = true
              this.tipstext = '没有更多了...'
              return
            }
          }
          this.yi_kong = true
          // console.log('就是没有')
        }
      })
    },
    // 一键
    onekey_with () {
      let requery = {
        app_id: this.app_id,
        member_id: this.user_id
      }
      getReady(requery).then(res => {
        let { code, data } = res.data
        if (code === 200) {
          this.houjiamarsk = true
          this.tixiData = data
          this.requery = requery
        }
      })
      // axios.post('api/chat/cash/onekey_money', requery).then(res => {
      //   let {
      //     code,
      //     data,
      //     msg
      //   } = res.data
      //   // console.log('领取结果', data)
      //   if (code == 200) {
      //     this.co_with_tips = true
      //     this.tipstext = '成功提取到零钱'
      //     this.weilingqu = []
      //     this.getWeilingqu()
      //   } else {
      //     this.co_with_tips = true
      //     this.tipstext = msg
      //   }
      // })
    },
    // 单领
    with_money (e, m, item) {
      let requery = {
        app_id: this.app_id,
        member_id: this.user_id,
        distribution_id: e,
        money: m,
        type: 'type_url'
      }
      getReady(requery).then(res => {
        let { code, data } = res.data
        if (code === 200) {
          this.houjiamarsk = true
          this.tixiData = data
        }
      })
      this.requery = requery
      // 王加
      if (item.type_url) {
        requery.type = 'type_url'
      }
      if (item.type_up) {
        requery.type = 'type_up'
      }
      if (item.type_zhanzhang) {
        requery.type = 'type_zhanzhang'
      }
    }
  }

}
</script>

<style scoped>
.aside {
  width: calc(100vw * 345 / 750);
  height: calc(100vw * 60 / 750);
  background: #DA4131;
  border-radius: calc(100vw * 2 / 750);
  margin: calc(100vw * 36 / 750) auto 0 auto;
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 28 / 750);
  color: #ffffff;
  text-align: center;
  border-radius: calc(100vw * 32 / 750);
  line-height: calc(100vw * 60 / 750);
}
.heheda {
  width: calc(100vw * 263 / 750);
  font-size: calc(100vw * 28 / 750);
  text-align: center;
  margin: 0 auto;
  margin-top: calc(100vw * 36 / 750);
  color: #fff;
}
.seti-line {
  width: 100%;
  height: 1px;
  background-color: #e5e5e5;
  margin-top: calc(100vw * 30 / 750);
}
.marsk {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 100;
}
.houjia {
  width: 100%;
  height: calc(100vw * 630 / 750);
  background-color: #fff;
  position: fixed;
  bottom: 0;
  z-index: 100;
}
.houjia-title {
  width: 100%;
  height: calc(100vw * 110 / 750);
  border-bottom: solid 1px #e5e5e5;
  text-align: center;
  line-height: calc(100vw * 110 / 750);
  font-family: PingFangSC-Medium;
  font-size: calc(100vw * 36 / 750);
  color: #333333;
}
.seti {
  width: 100%;
  margin-top: calc(100vw * 30 / 750);
  padding: 0 calc(100vw * 30 / 750);
  box-sizing: border-box;
  font-size: calc(100vw * 30 / 750);
  display: flex;
}
.seti > div {
  flex: 1;
}
.seti > div:nth-of-type(1) {
  color: #999;
}
.seti > div:nth-of-type(2) {
  text-align: right;
}
.houjia-btn {
  width: calc(100vw * 686 / 750);
  height: calc(100vw * 88 / 750);
  position: absolute;
  bottom: calc(100vw * 16 / 750);
  background-color: #DA4131;
  border-radius: calc(100vw * 38 / 750);
  color: #fff;
  text-align: center;
  line-height: calc(100vw * 88 / 750);
  left: 50%;
  transform: translate(-50%, 0);
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 32 / 750);
}
.contents {
  border-top: solid 1px #e5e5e5;
  margin-top: calc(100vw * 20 / 750);
  padding: calc(100vw * 20 / 750) calc(100vw * 30 / 750) 0
    calc(100vw * 30 / 750);
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 24 / 750);
  color: #999999;
  text-align: justify;
}
.vux-tab .vux-tab-item.vux-tab-selected {
  font-weight: bold;
}
.co_with_tips {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
}

.co_with_tab {
  width: 100vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  background: white;
}
.co_with_box {
  /* padding-top: 44px; */
  width: 100vw;
  min-height: 100vh;
  background: #f8f8f8;
}
.co_box_item {
  display: flex;
  width: 100%;
  height: calc(100vw * 190 / 750);
  border-bottom: solid 1px #eee;
  background: white;
  align-items: center;
  padding: 0 calc(100vw * 30 / 750);
  box-sizing: border-box;
}
.co_with_box > div .co_box_item:last-child {
  margin: none;
}

.with_img {
  width: calc(100vw * 130 / 750);
  height: calc(100vw * 130 / 750);
  border-radius: 5px;
  margin-right: calc(100vw * 30 / 750);
  overflow: hidden;
}

.with_img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.with_text {
  flex: 1;
  height: calc(100vw * 130 / 750);
  overflow: hidden;
  position: relative;
}

.with_text > div:nth-child(1) {
  font-size: 16px;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.with_text > div:nth-child(2) {
  font-size: 14px;
  color: #999999;
  margin-top: 6px;
}

.with_text > div:nth-child(3) {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #999999;
  margin-top: 4px;
  position: absolute;
  bottom: 0;
}
.with_btn {
  width: 87px;
  border-radius: 30px;
  border-radius: 30px;
  overflow: hidden;
  font-size: 12px;
}

.with_btn > div {
  width: 76px;
  height: 26px;
  line-height: 26px;
  border-radius: 5px;
  background: #DA4131;
  border-radius: 15px;
  color: white;
  text-align: center;
}
.co_with_onkey {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 70px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
  z-index: 10;
}
.co_with_onkey > div {
  width: 80%;
  height: 40px;
  background:#DA4131;
  color: white;
  text-align: center;
  font-size: 15px;
  line-height: 40px;
  border-radius: calc(100vw * 38 / 750);
}
.zhezhao {
  width: calc(100vw * 409 / 750);
  height: calc(100vw * 409 / 750);
  background: rgba(0, 0, 0, 0.6);
  border-radius: calc(100vw * 4 / 750);
  text-align: center;
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, 0);
}
.zhezhao > img {
  width: calc(100vw * 120 / 750);
  height: calc(100vw * 120 / 750);
  margin-top: calc(100vw * 50 / 750);
}
.zhezhao > p {
  color: #fff;
  font-family: PingFangSC-Regular;
  text-align: center;
}
.zhezhao > p:nth-of-type(1) {
  margin-top: calc(100vw * 10 / 750);
  margin-bottom: calc(100vw * 10 / 750);
}
</style>
